<template>
	<view>
		<!-- 搜索栏 -->
		<view class="search_box">
			<input type="text" placeholder="搜索计划标题" maxlength="30" v-model.trim="planTitle">
			<image src="@/static/index/search/search.png" @click="getPlanList"></image>
		</view>
		
		<view class="total_tip" v-if="isTipShow">
			共找到 {{searchResList.length}} 条计划
		</view>
		
		<!-- 已完成 计划展示列表 -->
		<view 
		class="plan_item" 
		:class="{'plan_complete_status': item.progress === 100}"
		v-for="item in searchResList"
		@click="$navigateTo({
			url: `/pages/index/add_and_update_plan/index?mode=update&duration=${item.duration}&planid=${item.id}`
		})">
			<view class="plan_title">{{item.title}}</view>
			
			<view class="plan_tag_list">
				<view class="tag_item" v-for="itemChild in item.tagList" :style="{'background-color': itemChild.color}">
					{{'#' + itemChild.tagName}}
				</view>
			</view>
			
			<view class="plan_ddl">
				<view :style="{color: item.progress === 100 ? '#000000' : isPlanExpired(item.deadline) ? '#E24844': '#617FDE'}">{{item.deadline}}</view>
				<view class="duration">{{item.duration === 'short' ? '短' : '长'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { isPlanExpired } from '@/utils/planDateHandle.js'
	export default {
		data() {
			return {
				planTitle: '',
				searchResList: [],
				isTipShow: false,
			};
		},
		onShow() {
			if(this.planTitle) {
				this.getPlanList()
			}
		},
		methods: {
			// 判断计划是否过期
			isPlanExpired,	
			// 表单验证
			submitValidate() {
				if(!this.planTitle) {
					uni.showToast({
						icon: 'none',
						title: '请输入计划标题'
					})
					return false
				} 
				
				return true
			},
			getPlanList() {
				if(!this.submitValidate()) return
				
				this.$http_json({
					url: "/api/plan/list",
					method: "get",
					loading: false,
					params: {
						title: this.planTitle,
						userId: this.$getMemoryPmt('userInfo').id
					}
				}).then(result => {
					// console.log(result)
					this.searchResList = result.data
					this.isTipShow = true
					
				})
				
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	.search_box {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		
		image {
			min-height: 50rpx;
			min-width: 50rpx;
			height: 50rpx;
			width: 50rpx;
		}
		
		input {
			height: 70rpx;
			width: 100%;
			font-size: 34rpx;
		}
	}
	
	.total_tip {
		padding: 0 30rpx;
		color: #888888;
		font-size: 26rpx;
		margin: 10rpx 0;
	}
	
	.plan_item {
		border-bottom: 2rpx solid #F1F1F1;
		padding: 0 30rpx;
		
		.plan_title {
			font-size: 30rpx;
			font-weight: bold;
			padding-top: 19rpx;
		}
		
		.plan_tag_list {
			display: flex;
			flex-wrap: wrap;
			
			.tag_item {
				color: #FFFFFF;
				
				height: 40rpx;
				border-radius: 20rpx;
				
				display: flex;
				align-items: center;
				
				padding: 0 14rpx;
				font-size: 24rpx;
				
				margin: 19rpx 14rpx 0 0;
				
			}
		}
		
		.plan_ddl {
			padding: 14rpx 0;
			color: #617FDE;
			font-size: 24rpx;
			
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.duration {
				background-color: #617FDE;
				color: #FFFFFF;
				font-size: 20rpx;
				font-weight: bold;
				
				width: 34rpx;
				height: 34rpx;
				border-radius: 50%;
				
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	
	.plan_complete_status {
		opacity: 0.3;
	}
</style>
